<template>
<div class="blog_box">
  <a-button @click="router.push('/admin/blog/editor')" type="primary" size="large">
    <file-add-outlined />
    新建文章
  </a-button>
  <a-table class="data-table"
           :data-source="blogs"
           :columns="columns"
           :pagination="pagination"
           :loading="loading"
           @change="updateTable"
           :rowKey="record => record.id">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.key === 'classify'">
        {{ record.classify ? record.classify.name : '默认分类' }}
      </template>
      <template v-if="column.dataIndex === 'operation'">
        <a-button type="link" @click="router.push(`/admin/blog/editor?id=${record.id}`)">编辑文章</a-button>
        <a-button type="link" @click="viewComment(record)">评论管理</a-button>
        <a-popconfirm title="您真的要删除这个文章吗？"
                      okText="删除"
                      okType="danger"
                      cancelText="取消"
                      @confirm="deleteBlog(record.id)">
          <a-button type="link" danger size="small">删除文章</a-button>
        </a-popconfirm>
      </template>
      <template v-if="column.dataIndex === 'author'">
        {{ record.author.name }}
      </template>
    </template>
  </a-table>
  <!-- 评论管理面板 -->
  <ArticleCommentView :visible="commentTable.visible"
                      :id="commentTable.currentId"
                      :title="commentTable.currentTitle"
                      @close="commentTable.visible = false" />
</div>
</template>

<script setup>
import axios from "axios";
import {onMounted, ref} from "vue";
import {FileAddOutlined} from "@ant-design/icons-vue";
import {useRouter} from "vue-router";
import {apiDelete} from "../../../fentch";
import {notification} from "ant-design-vue";
import ArticleCommentView from "../../../components/admin/blog/article/ArticleCommentView.vue";

let getBlogURL = '/blogs'

const router = useRouter()

const blogs = ref([]);
const loading = ref(true);
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0
});

const columns = [
  {
    name: 'ID',
    dataIndex: 'id',
    title: 'ID',
    key: 'id'
  },
  {
    name: 'title',
    dataIndex: 'title',
    title: '标题',
    key: 'title'
  },
  {
    dataIndex: 'classify',
    title: '分类',
    key: 'classify'
  },
  {
    dataIndex: 'author',
    title: '作者',
    key: 'author'
  },
  {
    dataIndex: 'like_count',
    title: '点赞数',
    key: 'like_count'
  },
  {
    dataIndex: 'comment_count',
    title: '评论数',
    key: 'comment_count'
  },
  {
    dataIndex: 'created_at',
    title: '发布时间',
    key:'created_at'
  },
  {
    title: '操作',
    dataIndex: 'operation'
  }
]

const updateTable = async (pagination) => {
  await getData(pagination.current)
}

const getData = async (page=1) => {
  loading.value = true
  let blogsData = (await axios.get(`/api${getBlogURL}?page=${page}`)).data.data
  blogs.value = blogsData.data
  pagination.value.current = blogsData.current_page
  pagination.value.total = blogsData.total
  loading.value = false
}

/**
 * 删除操作
 */
const deleteBlog = id => {
  if (id === '') return
  apiDelete(`/blogs/soft/${id}`).then(res => {
    if (res.data.code === 0) {
      getData()
      return
    }
    notification.error({
      message: '请求错误',
      description: res.data.message
    })
  })
}

/**
 * 查看评论
 */
const commentTable = ref({
  visible: false,
  currentId: 0,
  currentTitle: ''
})
const viewComment = record => {
  commentTable.value.visible = true
  commentTable.value.currentId = record.id
  commentTable.value.currentTitle = record.title
}

onMounted(async () => {
  // 判断是否为个人用户
  let user = JSON.parse(window.localStorage.getItem('user'));
  if (user.level !== 0) {
    getBlogURL = `/blogs/user/${user.id}`
  }
  await getData()
})
</script>

<style scoped>
.data-table {
  padding-top: 20px;
}
</style>